<template>
    <div class="flex flex_column" style="height:100%">
        <div class="flex" style="margin-bottom: 12px;">
            <div class="ma-content-block p-4 flex_1" style="margin-right: 16px;border-radius: 12px;">
                <div class="flex align_center justify_between" style="margin-bottom: 20px;">
                    <div class="flex align_center">
                        <div style="width: 4px;height: 20px;background: #1F6CEB;margin-right: 6px;"></div>
                        <div style="font-size: 20px;font-weight: 600;">事件统计</div>
                    </div>
                    <a-radio-group v-model="timeText" type="button" @change="handleShijian">
                        <a-radio value="今日">今日</a-radio>
                        <a-radio value="本周">本周</a-radio>
                        <a-radio value="本月">本月</a-radio>
                        <a-radio value="本年">本年</a-radio>
                    </a-radio-group>
                </div>
                <div class="flex " style="padding: 40px 28px;background: #FAFAFA;border-radius: 20px;">
                    <div class="flex flex_1" style="margin-right: 20px;">
                        <img src="./img/jieshoushu.png" width="80" height="80" style="margin-right: 20px;" />
                        <div class="flex flex_column justify_center" >
                            <div>接收数</div>
                            <div style="font-size: 30px;font-weight: 600;color: #1F6CEB;">{{shijianItem.js_count}}</div>
                        </div>
                    </div>
                    <div class="flex flex_1" style="margin-right: 20px;">
                        <img src="./img/chulishu.png" width="80" height="80" style="margin-right: 20px;" />
                        <div class="flex flex_column justify_center" >
                            <div>处理数</div>
                            <div style="font-size: 30px;font-weight: 600;color: #1F6CEB;">{{shijianItem.cl_count}}</div>
                        </div>
                    </div>
                    <div class="flex flex_1" style="margin-right: 20px;">
                        <img src="./img/chaoshishu.png" width="80" height="80" style="margin-right: 20px;" />
                        <div class="flex flex_column justify_center" >
                            <div>超时数</div>
                            <div style="font-size: 30px;font-weight: 600;color: #1F6CEB;">{{shijianItem.cs_count}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ma-content-block p-4 flex_1" style="border-radius: 12px;">
                <div class="flex align_center justify_between" style="margin-bottom: 20px;">
                    <div class="flex align_center">
                        <div style="width: 4px;height: 20px;background: #1F6CEB;margin-right: 6px;"></div>
                        <div style="font-size: 20px;font-weight: 600;">任务统计</div>
                    </div>
                    <a-select :options="monthList" v-model="month"  :style="{width:'120px'}" placeholder="" @change="handleRenwu" />
                </div>
                <div class="flex " style="padding: 40px 28px;background: #FAFAFA;border-radius: 20px;">
                    <div class="flex flex_1" style="margin-right: 20px;">
                        <img src="./img/daichuli.png" width="80" height="80" style="margin-right: 20px;" />
                        <div class="flex flex_column justify_center" >
                            <div>待处理</div>
                            <div style="font-size: 30px;font-weight: 600;color: #1F6CEB;">{{renwuItem.js_count}}</div>
                        </div>
                    </div>
                    <div class="flex flex_1" style="margin-right: 20px;">
                        <img src="./img/chulizhong.png" width="80" height="80" style="margin-right: 20px;" />
                        <div class="flex flex_column justify_center" >
                            <div>处理中</div>
                            <div style="font-size: 30px;font-weight: 600;color: #1F6CEB;">{{renwuItem.cl_count}}</div>
                        </div>
                    </div>
                    <div class="flex flex_1" style="margin-right: 20px;">
                        <img src="./img/yibanjie.png" width="80" height="80" style="margin-right: 20px;" />
                        <div class="flex flex_column justify_center" >
                            <div>已办结</div>
                            <div style="font-size: 30px;font-weight: 600;color: #1F6CEB;">{{renwuItem.cs_count}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ma-content-block p-4 flex_1 flex flex_column">
            <div class="flex align_center" style="margin-bottom: 12px;">
                <div style="width: 4px;height: 20px;background: #1F6CEB;margin-right: 6px;"></div>
                <div style="font-size: 20px;font-weight: 600;">近6日完结统计</div>
            </div>
            <ma-chart  :option="loginChartOptions" />
        </div>
    </div>
  </template>
  <script setup>
  import { ref, reactive,onMounted,onActivated } from 'vue'
  import secureMapManage from '@/api/secure/secureMapManage'
  import { graphic } from "echarts";
  import { Message } from '@arco-design/web-vue'
  import tool from '@/utils/tool'
  import * as common from '@/utils/common'
  import { request } from "@/utils/request.js";
  const timeText = ref('今日')
  const month = ref(1)
  const isShuaxin = ref(true)
  const shijianItem = ref({})
  const renwuItem = ref({})
  const loginChartOptions = ref({
        grid: {
            left: "2%",
            right: "2%",
            top: "10",
            bottom: "30",
        },
        xAxis: {
            type: "category",
            offset: 2,
            data: [],
            boundaryGap: false,
            axisLabel: {
                color: "#4E5969",
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: "#E5E8EF",
                },
            },
            axisPointer: {
                show: true,
                lineStyle: {
                    color: "#23ADFF",
                    width: 2,
                },
            },
            
        },
        yAxis: {
            type: "value",
            axisLine: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: "dashed",
                    color: "#E5E8EF",
                },
            },
        },
        tooltip: {
            trigger: "axis",
            formatter(params) {
                return `<div class="login-chart">
                    <p class="tooltip-title">${params[0].axisValueLabel}</p>
                    <div class="content-panel">
                    <span>安全：</span><span class="tooltip-value">${Number(
                        params[0].value
                    ).toLocaleString()}件</span></div>
                    <div class="content-panel">
                    <span>巡检：</span><span class="tooltip-value">${Number(
                        params[1].value
                    ).toLocaleString()}件</span></div>
                    </div>`;
            },
        },
        series: [
                {
                    data: [],
                    type: "line",
                    smooth: true,
                    symbolSize: 8,
                    lineStyle: {
                        width: 3,
                        color: new graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: "#00A0E9",
                            },
                            {
                                offset: 0.5,
                                color: "#00A0E9",
                            },
                            {
                                offset: 1,
                                color: "#00A0E9",
                            },
                        ]),
                    },
                    showSymbol: true,
                    areaStyle: {
                        opacity: 0.8,
                        color: new graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "rgba(0, 160, 233, 0.65)",
                            },
                            {
                                offset: 1,
                                color: "rgba(0, 160, 233, 0)",
                            },
                        ]),
                    },
                },
                {
                    data: [],
                    type: "line",
                    smooth: true,
                    symbolSize: 8,
                    lineStyle: {
                        width: 3,
                        color: new graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: "#00AB84",
                            },
                            {
                                offset: 0.5,
                                color: "#00AB84",
                            },
                            {
                                offset: 1,
                                color: "#00AB84",
                            },
                        ]),
                    },
                    showSymbol: true,
                    areaStyle: {
                        opacity: 0.8,
                        color: new graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "rgba(0, 171, 132, 0.65)",
                            },
                            {
                                offset: 1,
                                color: "rgba(0, 171, 132, 0)",
                            },
                        ]),
                    },
                },
        ],
  });
  const monthList = ref([
    {value:1,label:'1月'},
    {value:2,label:'2月'},
    {value:3,label:'3月'},
    {value:4,label:'4月'},
    {value:5,label:'5月'},
    {value:6,label:'6月'},
    {value:7,label:'7月'},
    {value:8,label:'8月'},
    {value:9,label:'9月'},
    {value:10,label:'10月'},
    {value:11,label:'11月'},
    {value:12,label:'12月'},
  ])
  onMounted(() => {
        handleJIN()
        handleShijian()
        handleRenwu()
        setTimeout(() => {
            isShuaxin.value = false
        }, 1000)
        
	})
    const handleRenwu = ()=>{
        request({
            url: "/secure/inpectionDistribute/getIndex_jrtj",
            method: "get",
            params:{
                month:month.value
            }
        }).then((res) => {
            renwuItem.value = res.data
        });
    }
    const handleShijian = ()=>{
        let time_section = ''
        if(timeText.value == '今日'){
            time_section = 'today'
        }else if(timeText.value == '本周'){
            time_section = 'week'
        }else if(timeText.value == '本月'){
            time_section = 'month'
        }else if(timeText.value == '本年'){
            time_section = 'year'
        }
        request({
            url: "/secure/eventManage/getIndex_tjaq",
            method: "get",
            params:{
                time_section
            }
        }).then((res) => {
            shijianItem.value = res.data
        });
    }
    
    const handleJIN = ()=>{
        request({
            url: "/secure/inpectionDistribute/getJqr",
            method: "get",
        }).then((res) => {
            console .log(res)
            let _data = res.data
            _data.inspection.map((v,i)=>{
                loginChartOptions.value.xAxis.data.push(v.time)
                loginChartOptions.value.series[1].data.push(v.data)
            })
            _data.secure.map((v,i)=>{
                loginChartOptions.value.series[0].data.push(v.data)
            })
        });
        
    }
    onActivated(() => {
        if (!isShuaxin.value) {
            handleJIN()
            handleShijian()
            handleRenwu()
        }
    })
  </script>
  <script> export default { name: 'secure:statistics' } </script>